<%--
  Created by IntelliJ IDEA.
  User: Carlos
  Date: 2020/10/18
  Time: 20:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    pageContext.setAttribute("path", request.getContextPath());
%>
<script type="application/javascript" src="${path}/js/jquery-1.11.0.min.js"></script>
<html>
<head>
    <title>Title</title>
</head>
<script type="application/javascript">


    function refresh() {
        $("#table").html("");
        var li = '    <tr>\n' +
            '        <th>编号</th>\n' +
            '        <th>姓名</th>\n' +
            '        <th>性别</th>\n' +
            '        <th>部门ID</th>\n'+
            '        <th>操作1</th>\n' +
            '        <th>操作2</th>\n' +
            '    </tr>';

        $.get("${path}/employee/list", function (data) {

            var employeeList = data.data;

            for (var i = 0; i < employeeList.length; i++) {
                var employee = employeeList[i];
                li += '<tr>\n' +
                    '<td>' + employee.eid + '</td>\n' +
                    '<td>' + employee.ename + '</td>\n' +
                    '<td>' + employee.gander + '</td>\n' +
                    '<td>' + employee.did + '</td>\n' +
                    '<td><a href="javascript:deleteById(${employee.eid})">删除</a></td>\n' +
                    '<td><a href="javascript:updateUI(${employee.eid})">修改</a></td>\n' +
                    '</tr>'
            }
            $("#table").html(li);
        }, 'json')


    }

    function deleteById(eid) {
        $.get("${path}/employee/delete?eid=" + eid, function (data) {
            // console.log(data)
            if (200 == data.code) {
                alert(data.msg)
                refresh()
            } else {
                alert(data.msg)
                refresh()
            }
        }, 'json')
    }

    function updateUI(eid) {
        $.get("${path}/employee/updateUI?eid=" + eid, function (data) {
            console.log(data)
            if (200 == data.code) {
                $("#update_form").css("display", "block")
                $("#table").css("display", "none")
                var employee = data.data
                $("#eid").val(employee.eid)
                $("#ename").val(employee.ename)
                $("#gander").val(employee.gander)
                $("#did").val(employee.did)
            }
        }, 'json')
    }

    function updateById() {
        var employee = $("#update_form").serialize();
        $.get("${path}/employee/updateById", employee, function (data) {
            console.log(data)
            $("#update_form").css("display", "none")
            $("#table").css("display", "block")
            refresh()
        }, 'json')
    }

    function addUI() {
                $("#add_form").css("display", "block")
                $("#table").css("display", "none")
    }


    function add() {
        var employee = $("#add_form").serialize();
        $.get("${path}/employee/add", employee, function (data) {
            console.log(data)
            $("#update_form").css("display", "none")
            $("#table").css("display", "block")
            refresh()
        }, 'json')
    }


</script>
<body>
    <a href="javascript:addUI()">添加</a>
<table border="1px" width="100%" id="table">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>部门ID</th>
        <th>操作1</th>
        <th>操作2</th>

    </tr>
    <c:forEach items="${employeeList}" var="employee">

        <tr>
            <td>${employee.eid}</td>
            <td>${employee.ename}</td>
            <td>${employee.gander}</td>
            <td>${employee.did}</td>
            <td><a href="javascript:deleteById(${employee.eid})">删除</a></td>
            <td><a href="javascript:updateUI(${employee.eid})">修改</a></td>
        </tr>
    </c:forEach>
</table>

<form id="update_form" style="display: none">
    <h1>修改页面</h1>
    编号：<input type="text" name="eid" id="eid">
    姓名：<input type="text" name="ename" id="ename">
    性别：<input type="text" name="gander" id="gander">
    部门ID：<input type="text" name="did" id="did">
    <input id="btn_update" onclick="updateById()" type="button" value="保存修改"/><br/>
</form>

    <form id="add_form" style="display: none">
        <h1>新增页面</h1>
        姓名：<input type="text" name="ename" >
        性别：<input type="text" name="gander" >
        部门ID：<input type="text" name="did">
        <input id="btn_add" onclick="add()" type="button" value="新增"/><br/>
    </form>
</body>
</html>


